<template>
	<div class="setting-base">
		<div class="setting-title">
			<p>图文导航</p>
			<div></div>
		</div>
		<div class="setting-form">
			<el-form :model="form">
				<h4>添加导航</h4>
				<p>最多添加 {{ limitNum }} 个导航</p>
				<el-form-item label="类型">
					<el-radio-group v-model="form.type">
						<el-radio label="1">图片导航 </el-radio>
						<el-radio label="2">文字导航</el-radio>
					</el-radio-group>
				</el-form-item>
				<div class="nav-item" v-for="(item, index) in form.navList" :key="index">
					<div class="left-nav" v-if="form.type != '2'">
						<div class="choose-nav">
							<div @click="chooseNav(index)" v-if="!item.url">
								<el-icon :size="20">
									<ele-Plus />
								</el-icon>
							</div>
							<img v-if="item.url" style="width: 100%; height: 100%" :src="item.url" />
							<span v-if="item.url" class="modify-nav" @click="chooseNav(index)">更换图片 </span>
						</div>
					</div>
					<div class="right-nav">
						<el-form-item label="标题">
							<el-input v-model="item.title" placeholder="请输入标题" />
						</el-form-item>
						<el-form-item label="链接">
							<linkPage ref="linkPageUrl" :pageUrl="item.linkUrl" :pageName="item.linkTitle"
								@linkPageCurrent="(item.linkUrl = $event.pageUrl), (item.linkTitle = $event.pageName)">
							</linkPage>
						</el-form-item>

					</div>
					<div>
						<el-icon v-if="form.navList.length > 1" :size="20" style="cursor: pointer" @click="del(index)">
							<ele-Delete />
						</el-icon>
					</div>
				</div>
				<div class="add-btn">
					<el-button @click="add" v-if="form.navList && form.navList.length < limitNum">
						<el-icon :size="20"> <ele-Plus /> </el-icon>添加图文导航（{{ form.navList.length }}/{{ limitNum
						}}）</el-button>
				</div>
				<div>
					<el-form-item label="一行显示" v-if="form.type == '1'">
						<el-radio-group v-model="form.showNum">
							<el-radio :label="4">4个导航 </el-radio>
							<el-radio :label="5">5个导航</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="文字颜色">
						<el-color-picker v-model="form.fontColor" />
					</el-form-item>
					<el-form-item label="背景颜色">
						<el-color-picker v-model="form.bgColor" />
					</el-form-item>
				</div>
			</el-form>
		</div>
		<imgDialog ref="imgDialogRef" :canChooseImagesNum="1" @changeImg="changeImg"></imgDialog>
	</div>
</template>

<script lang="ts">
import linkPage from './linkPage.vue';
import { storeToRefs } from 'pinia';
import { diypage } from '/@/stores/diyPage';
import { reactive, defineComponent, toRefs, watch, ref, onMounted } from 'vue';
import imgDialog from '/@/components/selectMaterial/imgDialog/index.vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
	components: { linkPage, imgDialog },
	props: {
		formData: {
			type: Object,
			defult: {},
		},
	},
	setup(props) {
		// do not use same name with ref
		// 定义变量内容
		const storesDiypage = diypage();
		const { diyPageData } = storeToRefs(storesDiypage);
		const dragOptions = ref({
			nimation: 200,
			group: 'description',
			disabled: false,
			ghostClass: 'ghost',
		});
		const imgDialogRef = ref();
		const chooseNavIndex = ref();
		const limitNum = ref(10);
		const state = reactive({
			form: {
				type: '1',
				fontColor: '#333',
				bgColor: '#fff',
				showNum: 4,
				navList: [{ url: undefined, title: '', linkUrl: undefined, linkTitle: undefined }],
			},
		});
		const chooseNav = (index: number) => {
			chooseNavIndex.value = index;
			imgDialogRef.value.dialog = true;
		};
		const add = () => {
			if (state.form.navList.length < limitNum.value) {
				state.form.navList.push({
					url: undefined,
					title: '',
					linkUrl: undefined,
					linkTitle: undefined,
				});
			}
		};
		const del = (index: number) => {
			ElMessageBox.confirm("确定删除吗？", '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				state.form.navList.splice(index, 1);
			});
		};
		// 页面加载时
		onMounted(() => {
			if (JSON.stringify(props.formData) == '{}') {
				state.form = {
					type: '1',
					fontColor: '#333',
					bgColor: '#fff',
					showNum: 4,
					navList: [
						{ url: undefined, title: '导航一', linkUrl: undefined, linkTitle: undefined },
						{ url: undefined, title: '导航二', linkUrl: undefined, linkTitle: undefined },
						{ url: undefined, title: '导航三', linkUrl: undefined, linkTitle: undefined },
						{ url: undefined, title: '导航四', linkUrl: undefined, linkTitle: undefined },
					],
				};
			} else {
				state.form = props.formData;
			}
			if (diyPageData.value.selectedIndex != undefined) {
				diyPageData.value.componentsList[diyPageData.value.selectedIndex].data = state.form;
			}
		});
		watch(
			() => props.formData,
			(newValue, oldValue) => {
				state.form = newValue ? newValue : state.form;
				// 注意：`newValue` 此处和 `oldValue` 是相等的
				// *除非* state.someObject 被整个替换了
			},
			{ deep: true, immediate: true }
		);
		const changeImg = (data: any) => {
			state.form.navList[chooseNavIndex.value].url = data[0];

		};
		const linkPageCurrent = (page: any) => { };
		return {
			limitNum,
			imgDialogRef,
			dragOptions,
			chooseNavIndex,
			add,
			del,
			changeImg,
			chooseNav,
			linkPageCurrent,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss">
@import './common.scss';

.nav-item {
	display: flex;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	margin: 10px;
	padding: 10px;

	.left-nav {
		width: 60px;
		height: 60px;
		border-radius: 2px;
		border: 1px solid #eee;
		background: #f2f4f6;

		.choose-nav {
			position: relative;
			width: 60px;
			height: 60px;
			line-height: 60px;
			text-align: center;

			.modify-nav {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 20px;
				line-height: 20px;
				font-size: 12px;
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				cursor: pointer;
			}
		}

		&:hover {
			cursor: pointer;
		}
	}

	.right-nav {
		padding-left: 10px;
	}
}

.add-btn {
	padding: 10px 0px 20px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
